<template lang="html">
  <section class="myselect">
    <div class="select">
      <el-select v-model='myselectValue'  @input="handleInput" placeholder="" class="select__field select__field--other">
        <el-option v-for="item in myselectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <label class="select__label select__label--other">
        <span class="select__label-content select__label-content--other">{{label}}</span>
      </label>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    label: String,
    productOptions: Array
  },
  data() {
    return {
      myselectOptions: [],
      myselectValue: ""
    };
  },
  methods: {
    handleInput() {
      this.$emit("input", this.myselectValue);
    }
  },
  watch: {
    productOptions(val) {
      this.myselectOptions = val;
    }
  }
};
</script>

<style lang="scss">
.myselect {
  float: left;
  .select {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0;
    max-width: 400px;
    width: calc(100% - 2em);
    vertical-align: top;
    .select__field {
      position: relative;
      display: block;
      float: right;
      width: 60%;
      border: none;
      border-radius: 0;
      background: #f0f0f0;
      color: #aaa;
      font-weight: bold;
      font-size: 1.4rem;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-appearance: none; /* for box shadows to show on iOS */
      input {
        border: 0;
        border-radius: 0;
        background: none;
        color: #fff;
      }
    }
    .select__field:hover {
      outline: none;
    }
    .select__label {
      display: inline-block;
      float: right;
      padding: 0 2px;
      width: 40%;
      color: #6a7989;
      font-weight: bold;
      font-size: 1.5rem;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .select__label-content {
      position: relative;
      display: block;
      padding: 1.6em 0;
      width: 100%;
    }
    //other
    .select__field--other {
      z-index: 10;
      width: 100%;
      background: transparent;
      // opacity: 0;
      // -webkit-transition: opacity 0.3s;
      // transition: opacity 0.3s;
    	input {
        margin-left: -5px;
        font-size: 1.6rem;
        font-weight: bold;
      	width: 100%;
      	background: transparent;
      	color: #2c626a;
      }
      input:hover {
        margin-left: -5px;
        font-weight: bold;
      	width: 100%;
      	background: transparent;
      	color: #f5f5f5;
        -webkit-transition: color 0.3s;
        transition: color 0.3s;
      }
    }

    // .select__field--other:hover {
    // 	z-index: 10;
    // 	width: 100%;
    // 	background: transparent;
    //   -webkit-transition: color 0.3s;
    //   transition: color 0.3s;
    //   input {
    //     z-index: 10;
    //   	width: 100%;
    //   	background: transparent;
    //   	color: #f5f5f5;
    //   }
    // }

    .select__field--other:focus {
    	z-index: 10;
    	width: 100%;
    	background: transparent;
    	color: #f5f5f5;
      -webkit-transition: color 0.3s;
    	transition: color 0.3s;
    }

    .select__label--other {
      position: relative;
      width: 100%;
      color: #2c626a;
      text-align: left;
    }

    .select__label--other::before {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 0;
      width: 100%;
      height: 40px;
      background: #48a1af;
      -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
    }

    .select__label--other::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: #2c626a;
      -webkit-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
      -webkit-transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
    }

    .select__label-content--other {
      padding: 0.75em 0;
    }

    .select__field--other:hover,
    .select--filled .select__field--other {
      opacity: 1;
      -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }

    .select__field--other:hover + .select__label--other::before,
    .select--filled .select__label--other::before {
      -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
      transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
    }

    .select__field--other:hover + .select__label--other,
    .select--filled .select__label--other {
      pointer-events: none;
    }

    .select__field--other:hover + .select__label--other::after,
    .select--filled .select__label--other::after {
      -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
      transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
    }
  }
}
</style>
